<template>
    <div class="detail" >
        <div class="start">
            <h2>产品展示</h2>
            <div class="lineHei"></div>
            <p>专注互联网信息化服务，用技术与专注，将作品通过艺术和技术的结合，打造精品案例。</p>
        </div>
        <div class="nav about">
            <div class="line_left"></div>
            <a href="javascript:void (0)" class="about">产品展示</a>
            <div class="line_right"></div>
        </div>
<!--        卡片组件-->
        <card-one v-if="id===1"></card-one>
        <card-two v-if="id===2"></card-two>
        <card-three v-if="id===3"></card-three>
        <card-four v-if="id===4"></card-four>
<!--        问题组件-->
        <question-ask></question-ask>
    </div>
</template>

<script>
    export default {
        name: "resultsDetail",
        data(){
            return{
                id:0
            }
        },
        created() {
            this.id=parseInt(this.$route.params["id"]);
            console.log(this.id);

        },
        components:{
            cardOne:()=>import('./cardOne'),
            cardTwo:()=>import('./cardTwo'),
            cardThree:()=>import('./cardThree'),
            cardFour:()=>import('./cardFour'),
            questionAsk:()=>import('../../components/question/question'),

        }
    }
</script>

<style  lang="less" scoped>
    .detail{
        width: 100%;
        min-width: 1300px;
        box-sizing: border-box;
        .start{
            height: 400px;
            padding: 150px 170px;
            box-sizing: border-box;
            background: url("../../assets/service/service.jpg") no-repeat;
            background-size: 100% 100%;
            h2{
                font-size: 30px;
                font-weight: 500;
                color: white;
                margin-bottom: 15px;
            }
            .lineHei{
                height: 2px;
                width: 80px;
                background: #0595C7;
            }
            p{
                font-size: 15px;
                color: white;
                opacity: .8;

            }
        }
        .nav{
            height: 180px;
            /*width: 100%;*/
            width: 1500px;
            min-width: 1300px;
            box-sizing: border-box;
            padding: 20px 200px;
            display: flex;
            align-items: center;

            .line_left{
                width: 500px;
                float: left;
                height: 1px;
                background: #cccccc;
                margin-right: 15px;
            }
            .about{
                height: 80px;
                width: 75px;
                line-height: 80px;
                color: #0595C7;
                font-size: 13px;
                text-align: center;
                background: url("../../assets/about/title-img.jpg") no-repeat left;
                /*margin-right: 20px;*/
                /*transition: .5s ease-in-out;*/
            }
            .line_right{
                .line_left();
                margin-left: 15px;
            }

        }
    }
</style>
